<script>
  // 使用普通的 <script> 来声明选项
  // 如果你不想要一个组件自动地继承 attribute，你可以在组件选项中设置 inheritAttrs: false。
  export default {
    inheritAttrs: false
  }
</script>
<script setup>
import { useAttrs, watchEffect } from 'vue';
function onClick() {
  console.log('button点击了按钮');
}
// 在 JavaScript 中访问透传 Attributes
// 可以在 <script setup> 中使用 useAttrs() API 来访问一个组件的所有透传 attribute
const attrs = useAttrs()
/* 需要注意的是，虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。
你不能通过侦听器去监听它的变化。如果你需要响应性，可以使用 prop。
或者你也可以使用 onUpdated() 使得在每次更新时结合最新的 attrs 执行副作用。 */
watchEffect(() => {
  console.log(attrs); // 监听attrs变化无效
})
</script>

<template>
<!-- click 监听器会被添加到 <MyButton> 的根元素，即那个原生的 <button> 元素之上。当原生的 <button> 被点击，会触发父组件的 onClick 方法。
  同样的，如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器，则这个监听器和从父组件继承的监听器都会被触发。 -->
  <div class="btn-wrapper">
    <button class="btn" v-bind="$attrs" @click="onClick">click me</button>
    <h1>{{$attrs.msg}}</h1>
  </div>
</template>

<style></style>
